<template>
	<el-collapse v-model="activeNames">
		<el-collapse-item name="1">
			<template slot="title">
				<el-divider content-position="left">
					<view class="bold-text user-select-none">sp.Skeleton</view>
				</el-divider>
			</template>

			<el-row v-if="treeItemData.skeletonData.animations.length > 0">
				<el-col :span="spacing">Loop</el-col>
				<el-col :span="24-spacing">
					<el-checkbox v-model="isLoop">循环</el-checkbox>
				</el-col>
			</el-row>

			<!-- 预乘 premultipliedAlpha -->
			<el-row v-if="treeItemData.skeletonData.animations.length > 0">
				<el-col :span="spacing">PremultipliedAlpha</el-col>
				<el-col :span="24-spacing">
					<el-checkbox v-model="treeItemData.skeletonData.premultipliedAlpha" @change="handleCheckedPremultipliedAlpha">预乘</el-checkbox>
				</el-col>
			</el-row>

			<!-- anis -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Animations</el-col>
				<el-col :span="24-spacing">
					{{treeItemData.skeletonData.animations.length}}个
					<el-button plain @click="onClickClipLog" size="mini" icon="el-icon-monitor"
						v-if="treeItemData.skeletonData.animations.length > 0"></el-button>
				</el-col>
			</el-row>

			<view class="border-radius-4 u-m-t-8" v-if="treeItemData.skeletonData.animations.length > 0">
				<el-row v-for="(item,index) in treeItemData.skeletonData.animations" :key='index' class="u-m-t-5"
					v-if="index<4">
					<el-col :span="spacing">{{index}}</el-col>
					<el-col :span="24-spacing">
						<view class="ui-container">
							<el-input placeholder="请输入内容" v-model="treeItemData.skeletonData.animations[index]"
								:disabled="true" size="mini">
							</el-input>
							<el-button plain @click="onClickClipPlay(item)" size="mini"
								icon="el-icon-caret-right"></el-button>
						</view>
					</el-col>
				</el-row>

				<view class="u-m-t-8 ui-container" v-if="treeItemData.skeletonData.animations.length >= 4">
					<el-button class="more" type="primary" @click="drawer = true" size="mini">查看更多</el-button>
				</view>

			</view>

		</el-collapse-item>


		<el-drawer title="sp.Skeleton动画列表" :visible.sync="drawer" :direction="direction">
			<view class="border-radius-4 u-m-t-8" v-if="treeItemData.skeletonData.animations.length > 0">
				<el-row v-for="(item,index) in treeItemData.skeletonData.animations" :key='index' class="u-m-t-5">
					<el-col :span="4">{{index}}</el-col>
					<el-col :span="20">
						<view class="ui-container">
							<el-input placeholder="请输入内容" v-model="treeItemData.skeletonData.animations[index]"
								:disabled="true" size="mini">
							</el-input>
							<el-button plain @click="onClickClipPlay(item)" size="mini"
								icon="el-icon-caret-right"></el-button>
						</view>
					</el-col>
				</el-row>
			</view>
		</el-drawer>
	</el-collapse>
</template>

<script>
	/*   
	'skeletonData':{
		'animations': ['666','88855','1242'],
		'premultipliedAlpha' : true;
		'defaultSkin' : 'defaultSkin';
		'defaultAnimation' : 'defaultAnimation';
		'animation' : 'defaultAnimation';
		'loop' : true;
		'timeScale' : 1;
	}*/
	import {
		mapState
	} from 'vuex';
	export default {
		name: "ui-spSkeleton",
		computed: {
			...mapState({
				uuid: state => state.app.uuid,
				treeItemData: state => state.app.treeItemData,
			})
		},
		data() {
			return {
				activeNames: ['1'],
				spacing: 4,
				isLoop: true,
				direction: 'rtl',
				drawer: false,
			};
		},
		methods: {
			onClickClipLog() {
				let str = JSON.stringify(this.treeItemData.skeletonData.animations);
				let code = "window.pluginLog('" + str + "')";
				this._evalCode(code);
				this.$notify({
					title: '',
					message: '动画名已输出到控制台！',
					duration: 800,
					type: 'success'
				});
			},
			onClickClipPlay(value) {
				this._evalCode(
					"window.pluginPlaysSkeleton(" +
					"'" + this.uuid + "'," +
					"'" + this.isLoop + "'," +
					"'" + value + "'" +
					")");
			},
			handleCheckedPremultipliedAlpha(value){
				this._evalCode(
					"window.pluginSetNodeSkeletonData(" +
					"'" + this.uuid + "'," +
					"'" + 'premultipliedAlpha' + "'," +
					"'" + value + "'," +
					"'" + false + "'" +
					")");
				this._freshNode();
			}
		}
	}
</script>

<style>
	.el-collapse {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		overflow: hidden;
		color: #303133;
		-webkit-transition: .3s;
		transition: .3s;
		border-top: none;
		border-bottom: none;
		padding: 0px 15px;
		margin-top: 10px;
	}

	.el-button {
		margin-left: 8px;
		padding: 6px 6px;
	}

	.border-radius-4 {
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 10px;
	}

	.more {
		width: 100%;
	}
</style>